<script>
export default {
  methods: {
    onKeyup(e) {
      this.$store.commit("SET_FILTER_KEY", e.target.value);
    },
    addMsg() {
      let _msg = {
        msgId: Math.floor(Math.random() * 10000),
        source: "USER",
        type: "2",
        sourceName: "关晓彤",
        title: "【琴诗·夜读】",
        msgContent: {
          textContent: {
            content:
              "郎官调绿绮，谷雪赏初晴。两忘弦与手，流泉松吹声。问言踰八十，云尝见河清。挂帆望九华，神人歘相迎。啖以海上枣，欢爱若平生。玄遇宁复得，惜哉遗姓名。"
          },
          formContent: {
            content: "您有 1 个审批单需处理。",
            formContents: {
              type: "发票申请",
              faqi: "张三",
              start: "2021-12-31 14:32:30",
              url: ""
            }
          }
        },
        bizId: "55555",
        sendUrl: "http://www.baidu.com",
        sendUsers: null,
        userName: null,
        receiveUserId: "654366374251302912",
        receiveUserName: "金强大哥",
        receivePhone: "13855663322",
        status: "1",
        statusDesc: "已发送未读取",
        readTime: null,
        sendTime: "2021-05-12"
      };
      this.$store.commit("SEND_MESSAGE", _msg);
    }
  },
  computed: {
    info() {
      return this.$store.state.messageCenter.info;
    }
  }
};
</script>

<template>
  <div class="card">
    <header>
      <span class="c-dot"></span>
      <p class="name" @click="addMsg()">{{info.name}}</p>
    </header>
    <footer>
      <input class="search" type="text" placeholder="搜索..." @keyup="onKeyup">
    </footer>
  </div>
</template>

<style scoped lang="less">
.card {
  padding: 15px;
  header {
    border-bottom: 1px dashed #ccc;
    padding-bottom: 10px;
  }
  .c-dot {
    width: 4px;
    height: 4px;
    background-color: #32325aff;
    border-radius: 50%;
    display: inline-block;
  }

  footer {
    margin-top: 10px;
  }

  .avatar,
  .name {
    vertical-align: middle;
  }
  .avatar {
    border-radius: 2px;
  }
  .name {
    display: inline-block;
    margin: 0 0 0 6px;
    font-size: 16px;
  }
  .search {
    padding: 0 10px;
    width: 100%;
    font-size: 14px;
    color: #333333;
    height: 32px;
    line-height: 32px;
    border: none;
    outline: none;
    background: rgba(50, 50, 90, 0.04);
    border-radius: 2px;
  }
}
</style>